<template>
    <header>
        <img src="../../../img/双十一.png" alt="">
    </header>
    <div>
        <van-card v-for="item in proList" :key="item.proid" :price="item.originprice"
            :origin-price="Number((item.originprice / (item.discount / 10)).toFixed(2))" :title="item.proname"
            :desc="item.desc">
            <template #tags>
                <van-tag type="danger">{{ item.brand }}</van-tag>
                <van-tag plain type="primary">{{ item.category }}</van-tag>
            </template>
        </van-card>
    </div>

    <!-- 优惠券单元格 -->
    <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
    <!-- 优惠券列表 -->
    <van-popup v-model:show="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
        <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
            @change="onChange" @exchange="onExchange" />
    </van-popup>


    <van-cell title="已选" is-link url="" />

    <van-field v-model="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区" @click="show = true" />
    <van-popup v-model:show="show" round position="bottom">
        <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="show = false"
            @finish="onFinish" />
        <van-button type="primary" to="/address">选择其他地址</van-button>
    </van-popup>


    <van-card desc="七天无理由退货  7天价保   免费上门退换" />



</template>

<script>
export default {
    props: ['proList'],
    data() {
        // 1. 先定义券对象
        const coupon = {
            available: 1,
            condition: '无门槛\n最多优惠12元',
            reason: '',
            value: 150,
            name: '优惠券名称',
            startAt: 1489104000,
            endAt: 1514592000,
            valueDesc: '1.5',
            unitDesc: '元',
        };

        return {
            show: false,
            fieldValue: '',
            cascaderValue: '',
            options: [
                {
                    text: '浙江省',
                    value: '330000',
                    children: [{ text: '杭州市', value: '330100' }],
                },
                {
                    text: '江苏省',
                    value: '320000',
                    children: [{ text: '南京市', value: '320100' }],
                },
            ],

            // 2. 优惠券相关
            coupons: [coupon],
            showList: false,
            chosenCoupon: -1,
            disabledCoupons: [coupon],
        };
    },

    methods: {
        onFinish(selectedOptions) {
            this.show = false;
            this.fieldValue = selectedOptions.map(o => o.text).join('/');
        },

        onChange(index) {
            this.showList = false;
            this.chosenCoupon = index;
        },

        onExchange(code) {
            // 示例：把新券 push 进去
            this.coupons.push({
                available: 1,
                condition: '兑换券',
                reason: '',
                value: 200,
                name: '兑换优惠券',
                startAt: 1489104000,
                endAt: 1514592000,
                valueDesc: '2',
                unitDesc: '元',
            });
        },
    },
};
</script>

<style lang="less" scoped>
header {
    width: 100%;
    height: 50px;

    img {
        height: 100%;
    }
}

/* 标题区域 */
::v-deep(.van-card__title) {
    font-size: 15px;
    color: #333;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
    white-space: normal !important; // 允许换行
    word-break: break-all; // 长单词断行
    max-height: none; // 去掉最大高度
}

::v-deep(.van-card__desc) {
    white-space: normal !important; // 允许换行
    word-break: break-all; // 长单词也能断
    line-height: 1.5; // 行高美观点
    max-height: none; // 去掉最大高度限制
}

::v-deep(.van-card__title) {
    font-size: 15px;
    color: #333;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
}

/* 现价 */
::v-deep(.van-card__price) {
    font-size: 17px;
    color: #e4393c;
    font-weight: bold;
}

/* 原价 */
::v-deep(.van-card__origin-price) {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
}
</style>